<template>
  <div class="box4" ref="map">我是地图组件</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 引入中国地图的JSON数据

import chinaJson from "./china.json";

let map = ref();
// 注册中国地图
echarts.registerMap("china", chinaJson as any);

onMounted(() => {
  let mycharts = echarts.init(map.value);
  mycharts.setOption({
    //地图组件
    geo: {
      map: "china", //中国地图
      roam: true, //鼠标缩放的效果
      //地图的位置调试
      left: 130,
      top: 180,
      right: 120,
      zoom: 1.4, // 图放大比例
      bottom: 0,
      //地图上的文字的设置
      label: {
        show: true, //文字显示出来
        color: "white",
        fontSize: 12,
      },

      itemStyle: {
        //每一个多边形的样式
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#003b70", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#031f4c", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        borderColor: "#1e90ff", // 边框的颜色
        borderWidth: 1,
        opacity: 0.7,
      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: "#2a5caa",
        },
        label: {
          color: "#fff",
          fontSize: 16,
        },
      },
    },
    series: [
      {
        type: "lines", //航线的系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [114.298572, 30.584355], // 终点
            ],
          },
          {
            coords: [
              [107.8839, 30.067297], // 起点
              [116.405285, 39.904989], // 终点
            ],
          },
          {
            coords: [
              [107.8839, 30.067297], // 起点
              [88.388277, 31.56375], // 终点
            ],
          },
          {
            coords: [
              [107.8839, 30.067297], // 起点
              [85.294711, 41.371801], // 终点
            ],
          },
          {
            coords: [
              [107.8839, 30.067297], // 起点
              [113.429919, 23.334643], // 终点
            ],
          },
          {
            coords: [
              [107.8839, 30.067297], // 起点
              [101.485106, 25.008643], // 终点
            ],
          },
        ],
        lineStyle: {
          normal: {
            color: "#1e90ff", // 线的颜色
            width: 2, // 线的宽度
            opacity: 0.6, // 线的透明度
            curveness: 0.2, // 线的曲度
          },
        },
        effect: {
          show: true, // 是否显示特效
          period: 5, // 特效的持续时间，单位是秒
          trailLength: 0, // 特效尾迹长度百分比
          color: "#fff",
          symbol: "arrow", // 特效的图形类型，此处使用箭头表示航线方向
          symbolSize: 7, // 特效图形的大小
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.box4 {
  width: 100%;
  height: 500px;
}
</style>
